<template>
  <el-collapse-item title="涟漪效果">
    <el-form-item label="显示">
      <el-switch v-model="attribute.effectScatter.show"/>
    </el-form-item>

    <template v-if="attribute.effectScatter.show">
      <el-form-item label="大小">
        <el-input-number v-model="attribute.effectScatter.symbolSize"/>
      </el-form-item>
      <tm-group label="文字">
        <el-form-item label="显示">
          <el-switch v-model="attribute.effectScatter.label.show"/>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="attribute.effectScatter.label.fontSize" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="attribute.effectScatter.label.color"/>
        </el-form-item>
      </tm-group>
      <formatter-option :data="attribute.effectScatter.label"/>
      <tm-group label="效果">
        <el-form-item label="波纹数量">
          <el-input-number v-model="attribute.effectScatter.rippleEffect.number" />
        </el-form-item>
        <el-form-item label="动画周期">
          <el-input-number v-model="attribute.effectScatter.rippleEffect.period" :step="0.5"/>
        </el-form-item>
        <el-form-item label="缩放比例">
          <el-input-number v-model="attribute.effectScatter.rippleEffect.scale" :step="0.5"/>
        </el-form-item>
        <el-form-item label="形式">
          <tm-radio v-model="attribute.effectScatter.rippleEffect.brushType" :data="brushTypeList"/>
        </el-form-item>
      </tm-group>
      <el-form-item label="波纹颜色">
        <el-color-picker v-model="attribute.effectScatter.itemStyle.color" />
      </el-form-item>
    </template>
  </el-collapse-item>
</template>

<script>
import tmRadio from "@/package/components/tm-radio";
import formatterOption from "@/package/options/chart/formatter-option";

export default {
  name: 'effect-scatter-option',
  cnName: 'effect-scatter-option',
  components: {
    tmRadio,
    formatterOption
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      brushTypeList: [
        {label: 'fill', value: 'fill'},
        {label: 'stroke', value: 'stroke'}
      ]
    }
  },
  methods: {}
}
</script>

